<template>
  <view class="content">
    <!-- 订单详情 -->
    <!-- {{tableData}} -->
    <view v-for="(item, index) in tableData" :key="index">
      <view class="item">
        <view class="I"> 收货人： {{ item.Contacts }} </view>
        <view class="II"> 联系方式: {{ item.Contacts_Phone }} </view>
      </view>
      <view class="item">
        <view class="title">{{ item.Enterprise_Name }}</view>
        <view class="cont">
          <view class="left">
            <image :src="Domain_IMG + item.Picture_URL" mode="scaleToFill" />
          </view>
          <view class="right">
            <view>{{ item.Article_Name }}</view>
            <view class="text-danger">×{{ item.Amount }}{{ item.Unit }}</view>
            <view>付款方式：{{ item.Trading_Name }}</view>
          </view>
        </view>
      </view>
      <view class="item foot">
        <view>应付金额 :<text>{{ item.Submission_Time }}</text>
        </view>
        <view>付款方式 :{{ item.Trading_Name }}</view>
        <view>下单时间 :{{ item.Submission_Time }}</view>
        <view>实付金额 :{{ item.Submission_Time }}</view>
        <view>待付金额 :{{ item.Submission_Time }}</view>
        <view>运输方式 :{{ item.Transport_Name }}</view>
      </view>
      <view class="item foot" v-for="item, i in Data" :key="i">
        <view>
          <view>付款阶段 :<text>{{ item.Trading_Detail_Name }}</text>
          </view>
          <view>付款额度 :{{ item.Trading_Amount }}%</view>
          <view>付款金额 :￥{{ item.Amount }}</view>
          <view>最晚付款时间 :{{ item.Trading_Date }}天后</view>
          <button size="mine" v-if="item.Row_Status == 0"
            @click="handleTabs('/pages/My/My_Order/supply-order-detail?Group_Paystages_SerialNumber=' + item.Group_Paystages_SerialNumber + '&Amount=' + item.Amount)">点击支付</button>
          <view v-else class="w-100 font-md text-success text-center font-weight-bolder">已付款</view>
          <!--  -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import {
  TransactionPaystagesID,
  GroupWeChatNativeAction,
  GroupElectronicRemittance,
  ElectronicPIC
} from '@/api/group.js'
export default {
  onLoad(options) {
    this.Enterprise_Info_SerialNumber = options.Enterprise_Info_SerialNumber;
    this.Group_Transaction_SerialNumber = options.Group_Transaction_SerialNumber;
    this.tableData.push(uni.getStorageSync("detail"));
    console.log();
    this.getDetail({
      Group_Transaction_SerialNumber: options.Group_Transaction_SerialNumber
    })
  },
  data() {
    return {
      Domain_IMG: app.globalData.Domain_IMG,
      Group_Transaction_SerialNumber: "",
      Enterprise_Info_SerialNumber: "",
      tableData: [],
      tableData1: [],
      Data: [],
    };
  },
  methods: {
    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    async getDetail(data) {
      const res = await TransactionPaystagesID({
        data,
      })
      if (res.redirect && res.redirect == 'REDIRECT' || res.REDIRECT == 'REDIRECT') {
        console.log(res.redirect);
      } else if (res.Status == 'success') {
        this.Data = res.Data
        this.Data.forEach(item => {
          item.disabled = true
        })
        this.Data[0].disabled = false
        console.log(this.Data);
      }
    },
  },
  created() {
    this.getDetail(this.Group_Transaction_SerialNumber);
  }
};
</script>

<style lang="scss">
.content {
  padding: 20rpx;
  box-sizing: border-box;
  background: #f5f5f5;

  .item {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    margin: 0 0 30rpx 0;

    .I {
      font-weight: bold;
    }

    .II {
      font-size: 26rpx;
      display: inline-block;
      margin: 10rpx 0;
    }

    .cont {
      display: flex;
      justify-content: space-between;
      margin: 20rpx 0 0 0;
      padding: 20rpx;
      box-sizing: border-box;

      .left {
        width: 160rpx;
        height: 160rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
      }
    }
  }

  .foot {
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 24rpx;

    view {
      margin: 20rpx 0;
    }
  }

  .button {
    padding: 20rpx 30rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: -1px;
    left: 0;
    width: 100%;
    box-sizing: border-box;

    button {
      font-size: 32rpx;
      text-align: center;
      line-height: 32rpx;
      display: block;
      padding: 24rpx 0;
      background: #28a745;
      border-radius: 80rpx;
      color: #fff;
      width: 320rpx;
    }

    .cal {
      background-color: #f39147;
    }
  }
}
</style>